/**
 * desc: 公共描述列表组件
 * @title {string}: 描述列表标题
 * @textLimit {number}: 一个描述项希望最多展示多少文字，多余的会不展示，显示省略号，并增加查看全部按钮，可hover查看全部内容
 * @size {number}: 控制每行显示几项，配合row、col使用，8为三个， 12为两个，24为一个
 * @data {array} 展示的数据 { title：'', text: '', icon(后置图标, 可选): '', onClick(有图标的情况下点击事件，可选): onClick }
 */

import React from 'react';

import { Row, Col, Popover, Typography  } from 'antd';
import IconFont from '@/components/IconFont';

const { Paragraph } = Typography;

export default ({ title, textLimit=36, size=12, data=[], extra=null }) => {

  const renderText = (item) => {
    const val = item.text;
    const content = (
      <div style={{ width: 240 }}>
        {val}
      </div>
    )
    return (
      <span>
        {val.slice(0,textLimit)}...
        <Popover  content={content}>
          <span className="common-color2">查看全部</span>
        </Popover>
      </span>
    )
  }

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between'}}>
        {title && <h3>{title}</h3 > }
        {extra}
      </div>
      <Row gutter={24} style={{ overflow: 'hidden', lineHeight: '36px' }}>
        {
          data.map((item, index) => (
            <Col span={size} key={index}>
              <div style={{ display: 'flex'}}>
                <span style={{ width: '96px', textAlign: 'right' }}>{item.title}：</span>
                {
                  (/系统订单号/.test(item.title) && item.text) ? 
                  <Paragraph style={{ margin: 0 }} copyable>{item.text}</Paragraph>
                  :
                  <span style={{ flex: '1' }}>{item.text.length > textLimit ? renderText(item) : (item.text || '-')}{item.icon && <IconFont style={{ cursor: 'pointer', fontSize: '20px' }} type={item.icon} onClick={ item.onClick || null } />}</span>
                }
              </div>
                
            </Col>
          ))
        }
      </Row>
    </div>
  )
}